<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-05-12 15:25:37
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container" @click="clickOther">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>个人信息</h3>
      </div>
      <el-form label-width="180px">
        <el-form-item label="昵称">
          <input
            v-model="ninckname"
            placeholder="请填写昵称"
            spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="真实姓名">
          <input v-model="username" placeholder="请填写真实姓名" />
        </el-form-item>
        <el-form-item label="联系电话">
          <input v-model="account" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="所在年级">
          <el-select v-model="grade" placeholder="请选择" @change="changeGrade">
            <el-option
              v-for="item in gradeList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在省市区">
          <div class="adreess" ref="box">
            <!-- @click="choseSSQ = !choseSSQ" 地区暂时不让更改，取消点击出现选择地区栏 -->
            <div class="indput">
              <input type="text" disabled :value="adreess" @blur="clickOther" />
              <!-- <i class="el-icon-arrow-down jiantou" v-if="!choseSSQ"></i>
              <i class="el-icon-arrow-up jiantou" v-if="choseSSQ"></i> -->
            </div>
            <div class="adreessBox" v-show="choseSSQ">
              <div class="preBox box">
                <div
                  class="list"
                  v-for="item in provincecodeList"
                  :key="item.code"
                  @click="chosePre(item.code, item.name)"
                  :class="{ select_color: provincecode == item.code }"
                >
                  <span>{{ item.name }}</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="cityBox box" v-if="cityList.length > 0">
                <div
                  class="list"
                  v-for="item in cityList"
                  :key="item.code"
                  @click="choseCity(item.code, item.name)"
                  :class="{ select_color: citycode == item.code }"
                >
                  <span>{{ item.name }}</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="areaBox box" v-if="areaList.length > 0">
                <div
                  class="list"
                  v-for="item in areaList"
                  :key="item.code"
                  @click="choseArea(item.code, item.name)"
                  :class="{ select_color: areacode == item.code }"
                >
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="所在学校">
          <!-- <el-select
            v-model="school"
            filterable
            allow-create
            
            placeholder="请选择"
            @change="changeSchool"
          >
            <el-option
              v-for="item in schoolList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
          <div class="indput">
            <input type="text" disabled :value="school" />
          </div>
        </el-form-item>
        <el-form-item label="岗位职务">
          <el-select
            v-model="zhiwu_id"
            placeholder="请选择"
            @change="changeZhiwu"
          >
            <el-option
              v-for="item in zhiwuList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为班主任">
          <el-select
            v-model="isadviser"
            placeholder="请选择"
            @change="changeadviser"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 上传修改图片 -->
      <div class="editTouxiang">
        <img :src="file_url" alt="" v-if="file_url != ''" />
        <img src="../../../assets/img/mrtx.png" v-if="file_url == ''" />
        <div
          type="ghost"
          icon="ios-cloud-upload-outline"
          @click="zh_uploadFile"
        >
          选择头像
        </div>
        <input
          type="file"
          ref="evfile"
          @change="zh_uploadFile_change"
          style="display: none"
        />
      </div>

      <button class="submit" @click="submitUserMsg">保存提交</button>
      <div class="bottom">
        <p>注：</p>
        <p>
          1、本平台内职务调整不能即时生效，需通过审核才能生效，请您谨慎调整。职务调整后部分功能会发生相应改变
        </p>
        <p>2、职务每年仅可以可以调整3次</p>
        <p>3、年级调整后，教学计划会进行相应改变，请您谨慎调整</p>
      </div>
    </div>
  </div>
</template>

<script>
//引入省市区的数据,使用插件
// import { regionDataPlus } from "element-china-area";
//接口
import {
  userinfo,
  nianjilists,
  school,
  pca,
  list_systypes,
  setuserinfo,
  nowkemu,
  qiniuconfig,
  checkschool,
} from "../../../api/http";
import * as qiniu from "qiniu-js";
import { timeStamp2String } from "../../../utils/time";
export default {
  inject: ["reload"],
  data() {
    return {
      timeStamp2String,
      ninckname: "", //昵称
      username: "", //真实姓名
      phone: "", //练习电话
      account: "", //账号
      grade: "", //年级值id
      kemu_id: "", //当前科目id
      adreess: (this.province = ""
        ? "请选择所在的省市区"
        : this.province + "/" + this.city + "/" + this.area), //所在省市区
      provincecode: "", //省id
      citycode: "", //市id
      areacode: "", //区id
      province: "", //省名称
      city: "", //市名称
      area: "", //区名称
      school: "", //所在学校
      school_id: "", //学校id
      zhiwu_id: "", //岗位职务id
      oldzhiwu_id: "", //修改前职务id
      zhiwuList: [], //职务列表
      isadviser: "0", //是否为班主任
      // options: regionDataPlus, //省市区数据
      shengshiquCode: [], //省市区参数
      gradeList: [], //可选年级列表
      schoolList: [], //可选学校列表
      provincecodeList: [], //省列表
      cityList: [], //市列表
      areaList: [], //区列表
      choseSSQ: false, //省市区选择框的显示隐藏
      file_url: "", //头像地址
      baseurl: "", //七牛云域名
      upload_path: "", //七牛云上传目录
    };
  },
  computed: {
    // imageUrl() {
    //   console.log(this.value, 1111111);
    //   return this.value;
    // },
  },
  created() {
    //获取七牛云配置
    qiniuconfig({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "七牛云配置");
    });
    //获取职务分类列表
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "zhiwu",
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "职务列表");
        this.zhiwuList = res.retRes;
      } else {
        this.$notify.error({
          title: "错误",
          message: res.retErr,
          duration: 2000,
          showClose: false,
        });
      }
    });
    //获取省市区数据
    pca({
      type: "p",
    }).then((res) => {
      console.log(res, "省份数据 ");
      this.provincecodeList = res.retRes;
    });
    //获取当前用户信息
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "个人信息");
        const data = res.retRes;
        this.ninckname = data.title;
        this.username = data.true_name;
        this.account = data.account;
        this.phone = data.phone;
        this.grade = data.nianji_id;
        this.provincecode = data.provincecode;
        this.citycode = data.citycode;
        this.areacode = data.areacode;
        this.province = data.province;
        this.city = data.city;
        this.area = data.area;
        this.school = data.school_title;
        this.school_id = data.school_id;
        this.zhiwu_id = data.zhiwu_id;
        this.oldzhiwu_id = data.zhiwu_id;
        this.isadviser = JSON.stringify(data.is_bzr);
        this.adreess = data.province + "/" + data.city + "/" + data.area;
        this.file_url = data.file_url;
        //获取学校列表
        school({
          provincecode: this.provincecode,
          citycode: this.citycode,
          areacode: this.areacode,
        }).then((res) => {
          this.schoolList = [];
          console.log(res, "学校列表");
          if (res.retInt == 1) {
            const data = res.retRes;
            this.schoolList = data;
            // this.schoolList.unshift({id:0,title:'手动输入'})
          } else if (res.retInt != 1) {
            this.$notify.error({
              title: "错误",
              message: res.retErr,
              duration: 2000,
              showClose: false,
            });
          }
        });
      }
    });
    //获取年级列表数据
    nianjilists().then((res) => {
      console.log(res, "年级列表");
      const data = res.retRes;
      if (res.retInt == 1) {
        this.gradeList = data;
      } else if (res.retInt != 1) {
        this.$notify.error({
          title: "错误",
          message: res.retErr,
          duration: 2000,
          showClose: false,
        });
      }
    });
    //获取当前科目和版本
    nowkemu({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "当前科目和版本");
        this.kemu_id = res.retRes.kemu_id;
      } else {
        this.$notify.error({
          title: "错误",
          message: res.retErr,
          duration: 2000,
          showClose: false,
        });
      }
    });
  },
  mounted() {
    //点击某元素以外的任何区域
    document.addEventListener("click", this.dosome);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.dosome);
  },
  methods: {
    dosome(e) {
      // console.log(this.$refs.box.contains(e.target))
      if (!this.$refs.box.contains(e.target)) {
        this.choseSSQ = false; //这句话的意思是点击其他区域关闭（也可以根据自己需求写触发事件）
        // console.log(123)
      }
    },

    zh_uploadFile() {
      this.$refs.evfile.click();
    },
    zh_uploadFile_change(evfile) {
      console.log(evfile);
      //file是选择的文件对象
      return new Promise((resolve, reject) => {
        qiniuconfig({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          //获取后台返的token  和域名
          this.baseurl = res.retRes.file_base;
          this.upload_path = res.retRes.upload_path;
          let uptoken = res.retRes.qiniu_token;
          let file = evfile.target.files[0];
          let key =
            this.upload_path +
            timeStamp2String(new Date().getTime(), 12) +
            "/" +
            new Date().getTime() +
            Math.floor(Math.random() * 1000) +
            file.name.substring(file.name.lastIndexOf("."), file.name.length); //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数
          var config = {
            useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            // region: qiniu.region.z0, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。
            domain: "https://static.idianjiao.com", //配置好的七牛云域名
            chunkSize: 100, //每个分片的大小，单位mb，默认值3
            forceDirect: true, //直传还是断点续传方式，true为直传
          };
          var putExtra = {
            fname: file.name, //文件原始文件名
            params: {},
            mimeType: [] || null,
          };
          var observable = qiniu.upload(file, key, uptoken, putExtra, config);
          observable.subscribe({
            next: (result) => {
              //主要用来展示进度
            },
            error: (err) => {
              //上传错误后触发
              console.log(err);
              reject(err);
            },
            complete: (result) => {
              //上传成功后触发。包含文件地址。
              console.log(file.name, "ahah");
              console.log(this.baseurl + "/" + result.key, "aheihei");
              this.file_url = this.baseurl + "/" + result.key;
              resolve(result);
            },
          });
        });
      });
    },
    //点击别的地方
    clickOther() {
      // console.log(123);
    },
    //选择省
    chosePre(code, name) {
      console.log(code);
      this.provincecode = code;
      this.province = name + "/";
      this.citycode = "";
      this.city = "";
      this.areacode = "";
      this.area = "";
      this.areaList = [];
      pca({
        type: "c",
        pcode: this.provincecode,
      }).then((res) => {
        console.log(res, "城市数据 ");
        this.cityList = res.retRes;
      });
    },
    //选择市
    choseCity(code, name) {
      this.citycode = code;
      this.city = name + "/";
      this.areacode = "";
      this.area = "";
      pca({
        type: "a",
        pcode: this.citycode,
      }).then((res) => {
        console.log(res, "地区数据 ");
        this.areaList = res.retRes;
      });
    },
    //选择区
    choseArea(code, name) {
      this.areacode = code;
      this.area = name;
      this.choseSSQ = false;
      this.adreess = this.province + this.city + this.area;
      school({
        provincecode: this.provincecode,
        citycode: this.citycode,
        areacode: this.areacode,
      }).then((res) => {
        this.schoolList = [];
        console.log(res, "学校列表");
        if (res.retInt == 1) {
          const data = res.retRes;
          this.schoolList = data;
          // this.schoolList.unshift({id:0,title:'手动输入'})
        } else if (res.retInt != 1) {
          this.$notify.error({
            title: "错误",
            message: res.retErr,
            duration: 2000,
            showClose: false,
          });
        }
      });
    },
    //选择年级
    changeGrade(e) {
      this.grade = e;
    },
    //选择学校
    changeSchool(e) {
      console.log(e, typeof this.school, this.school);
      if (typeof this.school == "string") {
        console.log("不存在的学校");
        console.log(this.school_id);
        //输入的不存在的学校就查询并创建
        if (this.provincecode == "") {
          this.$notify.error({
            title: "错误",
            message: "请先选择省市区",
            duration: 2000,
            showClose: false,
          });
        } else {
          checkschool({
            md5key: localStorage.getItem("md5key"),
            provincecode: this.provincecode,
            citycode: this.citycode,
            areacode: this.areacode,
            title: this.school,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "创建学校");
              this.school_id = res.retRes.id;
            } else {
              this.$notify.error({
                title: "错误",
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        }
      } else if (typeof this.school == "number") {
        console.log("已存在的学校");
        this.school_id = e;
      }
    },
    //选择是否为班主任
    changeadviser(e) {
      this.isadviser = e;
    },
    //选择职务
    changeZhiwu(e) {
      this.zhiwu_id = e;
    },
    //提交修改个人信息
    submitUserMsg() {
      //提示弹窗
      this.$confirm("是否确认修个您的个人信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setuserinfo({
            md5key: localStorage.getItem("md5key"),
            school_id: this.school_id,
            kemu_id: this.kemu_id,
            nianji_id: this.grade,
            zhiwu_id: this.zhiwu_id,
            is_bzr: this.isadviser,
            title: this.ninckname,
            true_name: this.username,
            account: this.account,
            phone: this.phone,
            provincecode: this.provincecode,
            citycode: this.citycode,
            areacode: this.areacode,
            file_url: this.file_url,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "修改个人信息成功");
              if (this.oldzhiwu_id != this.zhiwu_id) {
                this.$notify({
                  message: "修改信息已提交审核，请耐心等待！",
                  duration: 2000,
                  showClose: false,
                });
              } else {
                this.$notify({
                  message: "修改个人信息成功",
                  duration: 2000,
                  showClose: false,
                });
              }
              this.reload();
            } else {
              this.$notify.error({
                title: "错误",
                message: res.retErr,
                duration: 2000,
                showClose: false,
              });
            }
          });
        })
        .catch(() => {
          this.$notify({
            message: "已取消修改",
            duration: 2000,
            showClose: false,
          });
        });
    },
  },
};
</script>
<style>
.el-cascader-panel {
  height: 400px !important;
}
.el-cascader .el-input .el-input__inner {
  border-color: #ccc;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ccc;
}
.el-select .el-input__inner:focus {
  border-color: #ccc;
}
.el-select-dropdown__item.selected {
  color: #08a579;
}
/* .el-icon-arrow-down {
  position: relative;
  left: -22px;
  transform: rotate(180deg);
} */
.el-button:hover {
  background: #fff;
  border-color: #08a579;
  color: #333;
}
.el-button--primary {
  background: #08a579 !important;
  border-color: #08a579 !important;
}
.el-button--primary:hover {
  background: #08a579 !important;
  border-color: #08a579;
  color: #fff;
}
/* .el-icon-close:before {
  color: #08a579;
} */
</style>
<style lang="less" scoped>
#container {
  .content {
    position: relative;
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .el-form {
      width: 400px;
      user-select: none;
    }
    .el-input {
      width: 400px;
    }
    .el-select {
      width: 400px;
    }
    /deep/.el-cascader .el-input {
      width: 400px;
    }
    .indput {
      position: relative;
    }
    input {
      padding-left: 15px;
      color: #666;
      width: 382px;
      height: 30px;
      border: 0;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      outline: none;
      background: #fff;
      cursor: pointer;
    }
    .jiantou {
      position: absolute;
      top: 7px;
      right: -170px;
      color: #999;
      font-size: 15px;
    }
    .adreess {
      position: relative;
      .select_color {
        color: #08a579;
        font-weight: 600;
        i {
          color: #08a579;
        }
      }
      // .icon_style {
      //   transform: rotate(180deg);
      // }
      .adreessBox {
        display: flex;
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 1000;
        background-color: #fff;
        box-shadow: 0px 0px 20px 4px #ccc;
        border-radius: 4px;
        transition: 1s;
        .box {
          margin-top: 10px;
          padding: 0px 15px 10px 40px;
          width: 170px;
          height: 250px;
          -ms-overflow-style: none; /* IE 10+ */
          scrollbar-width: none; /* Firefox */
          overflow-y: scroll;
          .list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            cursor: pointer;
          }
        }
        .preBox {
          border-right: 1px solid #ccc;
        }
        .cityBox {
          border-right: 1px solid #ccc;
        }
        ::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }
    }
    .head {
      position: absolute;
      top: 65px;
      right: 75px;
      display: flex;
      flex-direction: column;
      img {
        margin-bottom: 15px;
        width: 120px;
        height: 120px;
      }
      button {
        margin-left: 10px;
        width: 100px;
        height: 28px;
        border: 1px solid #dee0e3;
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
      }
    }
    .editTouxiang {
      position: absolute;
      top: 60px;
      right: 116px;
      text-align: center;
      cursor: pointer;
      img {
        width: 120px;
        height: 120px;
      }
      div {
        margin: 0 auto;
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        color: #969799;
        line-height: 28px;
        width: 100px;
        height: 28px;
        border: 1px solid #dee0e3;
        border-radius: 4px;
      }
    }
    .submit {
      cursor: pointer;
      margin: 40px 390px;
      width: 120px;
      height: 40px;
      background: #08a579;
      border-radius: 4px;
      border: 0;
      font-size: 14px;
      color: #fff;
    }
    .bottom {
      margin: 0 auto;
      margin-bottom: 30px;
      width: 695px;
      // height: 66px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #969799;
      line-height: 26px;
    }
  }
}
</style>